<!-- 车型添加 -->
<template>
  <div>
    <el-dialog
      :title="msg"
      :visible="showDialog"
      width="580px"
      @close="close"
    >
      <el-form
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
        :model="query"
        :rules="rules"
        style="width:450px"
      >
        <el-form-item
          label="车辆类型"
          prop="name"
        >
          <el-input
            v-model="query.name"
            type="text"
            placeholder="请输入车型"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="应载重量"
          prop="allowableLoad"
        >
          <el-input
            v-model="query.allowableLoad"
            type="text"
            placeholder="请输入应载重量"
          ><span slot="append">吨</span></el-input>
        </el-form-item>
        <el-form-item
          label="应载体积"
          prop="allowableVolume"
        >
          <el-input
            v-model="query.allowableVolume"
            placeholder="请输入应载体积"
            type="text"
          ><span slot="append">立方米</span></el-input>
        </el-form-item>
        <el-form-item
          label="长"
          prop="measureLong"
        >
          <el-input
            v-model="query.measureLong"
            placeholder="0.0"
            type="text"
          ><span slot="append">米</span></el-input>
        </el-form-item>
        <el-form-item
          label="宽"
          prop="measureWidth"
        >
          <el-input
            v-model="query.measureWidth"
            placeholder="0.0"
            type="text"
          ><span slot="append">米</span></el-input>
        </el-form-item>
        <el-form-item
          label="高"
          prop="measureHigh"
        >
          <el-input
            v-model="query.measureHigh"
            placeholder="0.0"
            type="text"
          ><span slot="append">米</span></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            @click="addbtn"
          >确定</el-button>
          <el-button @click="close">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { add, detail, update } from '@/api/transit'
export default {
  name: 'CarModelsAdd',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    editId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      msg: '新增车型',
      query: {
        allowableLoad: '',
        allowableVolume: '',
        // id: 0, // 不能用就注释这或者解开这
        measureHigh: '',
        measureLong: '',
        measureWidth: '',
        name: ''
        // num: 0, // 不能用就注释这或者解开这
        // goodsTypes: [{}]// 不能用就注释这或者解开这
      },
      rules: {
        allowableLoad: [{ required: true, message: '应载重量不能为空', trigger: 'blur' }],
        allowableVolume: [{ required: true, message: '应载体积不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '车辆类型不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    addbtn() {
      this.$refs.form.validate(async(isOk) => {
        if (isOk) {
          if (this.editId !== null) {
            await update(this.editId, this.query,)
          } else {
            await add(this.query)
          }
          this.$emit('updataadd')
          this.$message.success(`${this.msg}成功`)
          this.close()
        }
      })
    },
    close() {
      this.$emit('update:showDialog', false)
      this.$refs.form.resetFields()
      this.editId = null
    },
    async detail() {
      this.msg = '编辑车型'
      const res = await detail(this.editId)
      console.log(res)
      this.query = res.data
    }
  }
}
</script>
